
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-taobaotese"></i>
                    <div class="name">淘宝特色</div>
                    <div class="fontclass">.icon-taobaotese</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neiyi"></i>
                    <div class="name">内衣</div>
                    <div class="fontclass">.icon-neiyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yundongxie"></i>
                    <div class="name">运动鞋</div>
                    <div class="fontclass">.icon-yundongxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pixie"></i>
                    <div class="name">皮鞋</div>
                    <div class="fontclass">.icon-pixie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hufupin"></i>
                    <div class="name">护肤品</div>
                    <div class="fontclass">.icon-hufupin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juhuasuan"></i>
                    <div class="name">聚划算</div>
                    <div class="fontclass">.icon-juhuasuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meirong"></i>
                    <div class="name">美容</div>
                    <div class="fontclass">.icon-meirong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuang"></i>
                    <div class="name">男装</div>
                    <div class="fontclass">.icon-nanzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nvzhuang"></i>
                    <div class="name">女装</div>
                    <div class="fontclass">.icon-nvzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juhuasuan1"></i>
                    <div class="name">聚划算</div>
                    <div class="fontclass">.icon-juhuasuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-muyingwanju"></i>
                    <div class="name">母婴玩具</div>
                    <div class="fontclass">.icon-muyingwanju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujia"></i>
                    <div class="name">居家</div>
                    <div class="fontclass">.icon-jujia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xie"></i>
                    <div class="name">鞋</div>
                    <div class="fontclass">.icon-xie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-man88yuanbaoyou"></i>
                    <div class="name">满88元包邮</div>
                    <div class="fontclass">.icon-man88yuanbaoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neiyinanzhuang"></i>
                    <div class="name">内衣（男装）</div>
                    <div class="fontclass">.icon-neiyinanzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nvxie"></i>
                    <div class="name">女鞋</div>
                    <div class="fontclass">.icon-nvxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-75"></i>
                    <div class="name">酒杯</div>
                    <div class="fontclass">.icon-75</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianmaobaoyouqia"></i>
                    <div class="name">天猫-包邮卡</div>
                    <div class="fontclass">.icon-tianmaobaoyouqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-triangle-right"></i>
                    <div class="name">箭头向右</div>
                    <div class="fontclass">.icon-msnui-triangle-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-triangle-left"></i>
                    <div class="name">箭头向左</div>
                    <div class="fontclass">.icon-msnui-triangle-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-triangle-down"></i>
                    <div class="name">箭头向下</div>
                    <div class="fontclass">.icon-msnui-triangle-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-triangle-up"></i>
                    <div class="name">箭头向上</div>
                    <div class="fontclass">.icon-msnui-triangle-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujia1"></i>
                    <div class="name">居家</div>
                    <div class="fontclass">.icon-jujia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wine"></i>
                    <div class="name">啤酒</div>
                    <div class="fontclass">.icon-wine</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-20"></i>
                    <div class="name">20</div>
                    <div class="fontclass">.icon-20</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-50"></i>
                    <div class="name">50</div>
                    <div class="fontclass">.icon-50</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangshangyongpin"></i>
                    <div class="name">床上用品</div>
                    <div class="fontclass">.icon-chuangshangyongpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meizhuanghufu"></i>
                    <div class="name">美妆护肤</div>
                    <div class="fontclass">.icon-meizhuanghufu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangshangyongpin1"></i>
                    <div class="name">床上用品</div>
                    <div class="fontclass">.icon-chuangshangyongpin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuijianyouli"></i>
                    <div class="name">推荐有礼</div>
                    <div class="fontclass">.icon-tuijianyouli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-servicebaoyouqia"></i>
                    <div class="name">service-包邮卡</div>
                    <div class="fontclass">.icon-servicebaoyouqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-31tianmaojiadian"></i>
                    <div class="name">3.1-天猫家电</div>
                    <div class="fontclass">.icon-31tianmaojiadian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiajujiafang"></i>
                    <div class="name">家居家纺</div>
                    <div class="fontclass">.icon-jiajujiafang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juhuasuan2"></i>
                    <div class="name">聚划算</div>
                    <div class="fontclass">.icon-juhuasuan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mianfeibangwozhaohuo"></i>
                    <div class="name">免费帮我找货</div>
                    <div class="fontclass">.icon-mianfeibangwozhaohuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-99"></i>
                    <div class="name">9.9</div>
                    <div class="fontclass">.icon-99</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon6"></i>
                    <div class="name">免费</div>
                    <div class="fontclass">.icon-icon6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingjingqingjingchufang"></i>
                    <div class="name">情景_厨房</div>
                    <div class="fontclass">.icon-qingjingqingjingchufang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-brand"></i>
                    <div class="name">品牌</div>
                    <div class="fontclass">.icon-brand</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiaquanguanli"></i>
                    <div class="name">群蜂卡券管理</div>
                    <div class="fontclass">.icon-qiaquanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-24"></i>
                    <div class="name">封顶</div>
                    <div class="fontclass">.icon-24</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-201"></i>
                    <div class="name">20</div>
                    <div class="fontclass">.icon-201</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lvsedianqi"></i>
                    <div class="name">绿色电器</div>
                    <div class="fontclass">.icon-lvsedianqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-followus"></i>
                    <div class="name">关注我们</div>
                    <div class="fontclass">.icon-followus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-4"></i>
                    <div class="name">包邮</div>
                    <div class="fontclass">.icon-4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-17"></i>
                    <div class="name">男装</div>
                    <div class="fontclass">.icon-17</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-25"></i>
                    <div class="name">内衣</div>
                    <div class="fontclass">.icon-25</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juhuasuan3"></i>
                    <div class="name">聚划算</div>
                    <div class="fontclass">.icon-juhuasuan3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-benqitemai"></i>
                    <div class="name">本期特卖</div>
                    <div class="fontclass">.icon-benqitemai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qunfengqiaquanguanli"></i>
                    <div class="name">群蜂卡券管理</div>
                    <div class="fontclass">.icon-qunfengqiaquanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qunfengkefujingli"></i>
                    <div class="name">群蜂客服经理</div>
                    <div class="fontclass">.icon-qunfengkefujingli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-temai"></i>
                    <div class="name">特卖</div>
                    <div class="fontclass">.icon-temai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiadianxingye"></i>
                    <div class="name">家电行业</div>
                    <div class="fontclass">.icon-jiadianxingye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu1"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongyinkafei"></i>
                    <div class="name">冲饮、咖啡</div>
                    <div class="fontclass">.icon-chongyinkafei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taobao"></i>
                    <div class="name">淘宝</div>
                    <div class="fontclass">.icon-taobao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujitaobao"></i>
                    <div class="name">手机淘宝</div>
                    <div class="fontclass">.icon-shoujitaobao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian01"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan01"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tejiajinxingshi"></i>
                    <div class="name">特价进行时</div>
                    <div class="fontclass">.icon-tejiajinxingshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tedianmianxi"></i>
                    <div class="name">特点_免息</div>
                    <div class="fontclass">.icon-tedianmianxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tedianquanchangbaoyou"></i>
                    <div class="name">特点_全场包邮</div>
                    <div class="fontclass">.icon-tedianquanchangbaoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiweijiucocktail25"></i>
                    <div class="name">鸡尾酒_cocktail25</div>
                    <div class="fontclass">.icon-jiweijiucocktail25</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gaogenxie"></i>
                    <div class="name">高跟鞋</div>
                    <div class="fontclass">.icon-gaogenxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quan"></i>
                    <div class="name">券</div>
                    <div class="fontclass">.icon-quan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-service"></i>
                    <div class="name">客服电话</div>
                    <div class="fontclass">.icon-icon-service</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiebaopeishizhuanhuan"></i>
                    <div class="name">鞋包配饰</div>
                    <div class="fontclass">.icon-xiebaopeishizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-peishizhuanhuan"></i>
                    <div class="name">配饰（男装）</div>
                    <div class="fontclass">.icon-peishizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuangpeishizhuanhuan"></i>
                    <div class="name">男装</div>
                    <div class="fontclass">.icon-nanzhuangpeishizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhuang"></i>
                    <div class="name">童装</div>
                    <div class="fontclass">.icon-tongzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianyiqun"></i>
                    <div class="name">女装</div>
                    <div class="fontclass">.icon-lianyiqun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiazai3"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-xiazai3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tehui"></i>
                    <div class="name">特惠</div>
                    <div class="fontclass">.icon-tehui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-301"></i>
                    <div class="name">无忧售后</div>
                    <div class="fontclass">.icon-301</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujia2"></i>
                    <div class="name">居家</div>
                    <div class="fontclass">.icon-jujia2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuang1"></i>
                    <div class="name">男装</div>
                    <div class="fontclass">.icon-nanzhuang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mian"></i>
                    <div class="name">免</div>
                    <div class="fontclass">.icon-mian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">美容</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanchangbaoyou"></i>
                    <div class="name">全场包邮</div>
                    <div class="fontclass">.icon-quanchangbaoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangbao"></i>
                    <div class="name">箱包</div>
                    <div class="fontclass">.icon-xiangbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuang2"></i>
                    <div class="name">男装</div>
                    <div class="fontclass">.icon-nanzhuang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changxiaoremai"></i>
                    <div class="name">畅销热卖</div>
                    <div class="fontclass">.icon-changxiaoremai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meironghufu"></i>
                    <div class="name">美容护肤</div>
                    <div class="fontclass">.icon-meironghufu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxie"></i>
                    <div class="name">童鞋</div>
                    <div class="fontclass">.icon-tongxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiushui"></i>
                    <div class="name">酒水</div>
                    <div class="fontclass">.icon-jiushui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nvxie1"></i>
                    <div class="name">女鞋</div>
                    <div class="fontclass">.icon-nvxie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu1"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pijiu"></i>
                    <div class="name">啤酒</div>
                    <div class="fontclass">.icon-pijiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon61"></i>
                    <div class="name">特惠套餐</div>
                    <div class="fontclass">.icon-icon61</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-miaosha"></i>
                    <div class="name">秒杀</div>
                    <div class="fontclass">.icon-miaosha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-temai1"></i>
                    <div class="name">特卖</div>
                    <div class="fontclass">.icon-temai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianshimiaosha"></i>
                    <div class="name">限时秒杀</div>
                    <div class="fontclass">.icon-xianshimiaosha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-temai2"></i>
                    <div class="name">特卖</div>
                    <div class="fontclass">.icon-temai2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouarrow594"></i>
                    <div class="name">箭头_arrow594</div>
                    <div class="fontclass">.icon-jiantouarrow594</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanwaisousuo"></i>
                    <div class="name">站外搜索</div>
                    <div class="fontclass">.icon-zhanwaisousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbao"></i>
                    <div class="name">红包</div>
                    <div class="fontclass">.icon-hongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbao1"></i>
                    <div class="name">红包</div>
                    <div class="fontclass">.icon-hongbao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1672fu"></i>
                    <div class="name">1672-福</div>
                    <div class="fontclass">.icon-1672fu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou2"></i>
                    <div class="name">箭头(2)</div>
                    <div class="fontclass">.icon-jiantou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">精选特卖</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon3"></i>
                    <div class="name">挑选公司</div>
                    <div class="fontclass">.icon-icon3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuantejia"></i>
                    <div class="name">会员特价</div>
                    <div class="fontclass">.icon-huiyuantejia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuantejiaxiao"></i>
                    <div class="name">会员特价小</div>
                    <div class="fontclass">.icon-huiyuantejiaxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mianyunfeixiao"></i>
                    <div class="name">免运费小</div>
                    <div class="fontclass">.icon-mianyunfeixiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chakantieziguanzhu"></i>
                    <div class="name">关注</div>
                    <div class="fontclass">.icon-chakantieziguanzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifu"></i>
                    <div class="name">衣服</div>
                    <div class="fontclass">.icon-yifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouzuo"></i>
                    <div class="name">箭头左</div>
                    <div class="fontclass">.icon-jiantouzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpin"></i>
                    <div class="name">商品</div>
                    <div class="fontclass">.icon-shangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiu"></i>
                    <div class="name">酒</div>
                    <div class="fontclass">.icon-jiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mianfei"></i>
                    <div class="name">免费</div>
                    <div class="fontclass">.icon-mianfei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quan1"></i>
                    <div class="name">券</div>
                    <div class="fontclass">.icon-quan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian1"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhushichufang"></i>
                    <div class="name">主食厨房</div>
                    <div class="fontclass">.icon-zhushichufang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chufangdianqianzhuang"></i>
                    <div class="name">厨房电器安装</div>
                    <div class="fontclass">.icon-chufangdianqianzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiadianweixiu"></i>
                    <div class="name">家电维修</div>
                    <div class="fontclass">.icon-jiadianweixiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shumaweixiu"></i>
                    <div class="name">数码维修</div>
                    <div class="fontclass">.icon-shumaweixiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinliao"></i>
                    <div class="name">饮料</div>
                    <div class="fontclass">.icon-yinliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caigouriyongpin"></i>
                    <div class="name">采购日用品</div>
                    <div class="fontclass">.icon-caigouriyongpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neiyileimufill"></i>
                    <div class="name">内衣类目-fill</div>
                    <div class="fontclass">.icon-neiyileimufill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangbaoleimufill"></i>
                    <div class="name">箱包类目-fill</div>
                    <div class="fontclass">.icon-xiangbaoleimufill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangbaoleimu"></i>
                    <div class="name">箱包类目</div>
                    <div class="fontclass">.icon-xiangbaoleimu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuangleimufill"></i>
                    <div class="name">男装类目-fill</div>
                    <div class="fontclass">.icon-nanzhuangleimufill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuangleimu"></i>
                    <div class="name">男装类目</div>
                    <div class="fontclass">.icon-nanzhuangleimu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiushui1"></i>
                    <div class="name">酒水</div>
                    <div class="fontclass">.icon-jiushui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti2fuzhi06"></i>
                    <div class="name">玩具</div>
                    <div class="fontclass">.icon-weibiaoti2fuzhi06</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuantequan"></i>
                    <div class="name">会员特权</div>
                    <div class="fontclass">.icon-huiyuantequan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuma"></i>
                    <div class="name">数码</div>
                    <div class="fontclass">.icon-shuma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yewutubiaomian"></i>
                    <div class="name">业务图标—免</div>
                    <div class="fontclass">.icon-yewutubiaomian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuli"></i>
                    <div class="name">福利</div>
                    <div class="fontclass">.icon-fuli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tejia"></i>
                    <div class="name">特价</div>
                    <div class="fontclass">.icon-tejia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rightarrow"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-rightarrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuijiansel"></i>
                    <div class="name">推荐_sel</div>
                    <div class="fontclass">.icon-tuijiansel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caidanlantemaihui"></i>
                    <div class="name">菜单栏_特卖汇</div>
                    <div class="fontclass">.icon-caidanlantemaihui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouzuo1"></i>
                    <div class="name">箭头左</div>
                    <div class="fontclass">.icon-jiantouzuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouyou"></i>
                    <div class="name">箭头右</div>
                    <div class="fontclass">.icon-jiantouyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meironghufu1"></i>
                    <div class="name">美容护肤</div>
                    <div class="fontclass">.icon-meironghufu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpinfenlei"></i>
                    <div class="name">商品分类</div>
                    <div class="fontclass">.icon-shangpinfenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-welfare_2"></i>
                    <div class="name">福利_2</div>
                    <div class="fontclass">.icon-welfare_2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-new1"></i>
                    <div class="name">新人</div>
                    <div class="fontclass">.icon-new1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-new"></i>
                    <div class="name">新人</div>
                    <div class="fontclass">.icon-new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifu1"></i>
                    <div class="name">衣服</div>
                    <div class="fontclass">.icon-yifu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpinfenlei1"></i>
                    <div class="name">商品分类</div>
                    <div class="fontclass">.icon-shangpinfenlei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remai"></i>
                    <div class="name">热卖</div>
                    <div class="fontclass">.icon-remai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-54"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-54</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanzhuang3"></i>
                    <div class="name">男装</div>
                    <div class="fontclass">.icon-nanzhuang3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-right"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianqi"></i>
                    <div class="name">电器</div>
                    <div class="fontclass">.icon-dianqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-miaosha1"></i>
                    <div class="name">秒杀</div>
                    <div class="fontclass">.icon-miaosha1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiyuanmiaosha"></i>
                    <div class="name">一元秒杀</div>
                    <div class="fontclass">.icon-yiyuanmiaosha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test1"></i>
                    <div class="name">饮料</div>
                    <div class="fontclass">.icon-icon-test1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">酒杯</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wei-"></i>
                    <div class="name">喜欢选中</div>
                    <div class="fontclass">.icon-wei-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao-"></i>
                    <div class="name">衣服</div>
                    <div class="fontclass">.icon-tubiao-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifu2"></i>
                    <div class="name">衣服</div>
                    <div class="fontclass">.icon-yifu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuan1"></i>
                    <div class="name">智一玩具</div>
                    <div class="fontclass">.icon-ziyuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuan2"></i>
                    <div class="name">居家生活</div>
                    <div class="fontclass">.icon-ziyuan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuan"></i>
                    <div class="name">新人专享</div>
                    <div class="fontclass">.icon-ziyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-haoping-yuankuang"></i>
                    <div class="name">247好评-圆框</div>
                    <div class="fontclass">.icon-haoping-yuankuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nvzhuangqunzi-"></i>
                    <div class="name">女装裙子-4</div>
                    <div class="fontclass">.icon-nvzhuangqunzi-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_faxijianmianshenhe"></i>
                    <div class="name">icon_罚息减免审核</div>
                    <div class="fontclass">.icon-icon_faxijianmianshenhe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feizhu"></i>
                    <div class="name">飞猪</div>
                    <div class="fontclass">.icon-feizhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifutianjia"></i>
                    <div class="name">衣服添加</div>
                    <div class="fontclass">.icon-yifutianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shutong"></i>
                    <div class="name">书童</div>
                    <div class="fontclass">.icon-shutong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wanju"></i>
                    <div class="name">玩具 (3)</div>
                    <div class="fontclass">.icon-wanju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tehui1"></i>
                    <div class="name">特惠</div>
                    <div class="fontclass">.icon-tehui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-teselingshi"></i>
                    <div class="name">特色零食</div>
                    <div class="fontclass">.icon-teselingshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiushui2"></i>
                    <div class="name">酒水</div>
                    <div class="fontclass">.icon-jiushui2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lingshi"></i>
                    <div class="name">零食(2)</div>
                    <div class="fontclass">.icon-lingshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lingshi1"></i>
                    <div class="name">零食</div>
                    <div class="fontclass">.icon-lingshi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nanxie"></i>
                    <div class="name">男鞋</div>
                    <div class="fontclass">.icon-nanxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-live_icon"></i>
                    <div class="name">直播</div>
                    <div class="fontclass">.icon-live_icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-searchmagnifier"></i>
                    <div class="name">搜索，购物</div>
                    <div class="fontclass">.icon-searchmagnifier</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu2"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu3"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leipigepijux"></i>
                    <div class="name">18类皮革皮具x16</div>
                    <div class="fontclass">.icon-leipigepijux</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu-tianchong"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu-tianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chufang"></i>
                    <div class="name">厨房,锅</div>
                    <div class="fontclass">.icon-chufang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan1"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbao2"></i>
                    <div class="name">红包</div>
                    <div class="fontclass">.icon-hongbao2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongziyufuli"></i>
                    <div class="name">工资与福利</div>
                    <div class="fontclass">.icon-gongziyufuli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpinfenlei2"></i>
                    <div class="name">商品分类</div>
                    <div class="fontclass">.icon-shangpinfenlei2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifupifu"></i>
                    <div class="name">衣服 皮肤 主题</div>
                    <div class="fontclass">.icon-yifupifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Concise"></i>
                    <div class="name">充电器</div>
                    <div class="fontclass">.icon-Concise</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuliquan"></i>
                    <div class="name">福利券</div>
                    <div class="fontclass">.icon-fuliquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhcc_tiaoxuanwuzi"></i>
                    <div class="name">zhcc_挑选物资</div>
                    <div class="fontclass">.icon-zhcc_tiaoxuanwuzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chufang1"></i>
                    <div class="name">厨房</div>
                    <div class="fontclass">.icon-chufang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yundongxie1"></i>
                    <div class="name">运动鞋</div>
                    <div class="fontclass">.icon-yundongxie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neiyi1"></i>
                    <div class="name">内衣</div>
                    <div class="fontclass">.icon-neiyi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neiyi-"></i>
                    <div class="name">内衣-2</div>
                    <div class="fontclass">.icon-neiyi-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neiyi2"></i>
                    <div class="name">内衣</div>
                    <div class="fontclass">.icon-neiyi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu3"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiaolunkuo-"></i>
                    <div class="name">特卖</div>
                    <div class="fontclass">.icon-tubiaolunkuo-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbaolishi"></i>
                    <div class="name">红包利是</div>
                    <div class="fontclass">.icon-hongbaolishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbao3"></i>
                    <div class="name">红包</div>
                    <div class="fontclass">.icon-hongbao3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fu"></i>
                    <div class="name">福</div>
                    <div class="fontclass">.icon-fu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hufupin1"></i>
                    <div class="name">护肤品</div>
                    <div class="fontclass">.icon-hufupin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yundongxie2"></i>
                    <div class="name">运动鞋</div>
                    <div class="fontclass">.icon-yundongxie2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wanjuche"></i>
                    <div class="name">玩具车</div>
                    <div class="fontclass">.icon-wanjuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinliaobei"></i>
                    <div class="name">饮料杯</div>
                    <div class="fontclass">.icon-yinliaobei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpin1"></i>
                    <div class="name">商品</div>
                    <div class="fontclass">.icon-shangpin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuli1"></i>
                    <div class="name">福利</div>
                    <div class="fontclass">.icon-fuli1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuoxie"></i>
                    <div class="name">拖鞋</div>
                    <div class="fontclass">.icon-tuoxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiubei"></i>
                    <div class="name">酒杯</div>
                    <div class="fontclass">.icon-jiubei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taobao1"></i>
                    <div class="name">淘宝</div>
                    <div class="fontclass">.icon-taobao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riyongpin"></i>
                    <div class="name">日用品</div>
                    <div class="fontclass">.icon-riyongpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lingshi2"></i>
                    <div class="name">零食</div>
                    <div class="fontclass">.icon-lingshi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiadian"></i>
                    <div class="name">家电</div>
                    <div class="fontclass">.icon-jiadian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shumachanpin"></i>
                    <div class="name">数码产品</div>
                    <div class="fontclass">.icon-shumachanpin</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
